<template>
  <el-table :data="dataList" style="width: 100%" :row-key="isTree ? 'primaryKey' : ''" border default-expand-all :tree-props="defaultProps">
    <el-table-column prop="className" :label="className" width="320">
      <template slot-scope="scope">
        <span v-if="scope.row.isTotalValue" class="font-weight-700'">{{ scope.row.className }}</span>
        <span v-else> {{ scope.row.code || '' }}&emsp;{{ scope.row.className }} </span>
      </template>
    </el-table-column>
    <el-table-column :label="allMoney1" width="200">
      <template slot-scope="scope">
        <span>{{ scope.row.allMoney1 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column :label="allMoney2" width="170">
      <template slot-scope="scope">
        <span>{{ scope.row.allMoney2 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="differenceAmount" label="差异" width="150"> </el-table-column>
    <el-table-column label="差异率">
      <template slot-scope="scope">
        <span :class="scope.row.differenceRate > 0 ? 'color-3384FE' : 'color-red'">{{ scope.row.differenceRate || 0 | accMul }}%</span>
      </template>
    </el-table-column>
    <el-table-column :label="`1月${monthTxt}`" width="115">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount1 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`2月${monthTxt}`" width="115">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount2 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`3月${monthTxt}`" width="115">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount3 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`4月${monthTxt}`" width="115">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount4 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`5月${monthTxt}`" width="115">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount5 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`6月${monthTxt}`" width="115">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount6 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`7月${monthTxt}`" width="115">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount7 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`8月${monthTxt}`" width="115">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount8 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`9月${monthTxt}`" width="115">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount9 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`10月${monthTxt}`" width="120">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount10 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`11月${monthTxt}`" width="115">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount11 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="planYear" :label="`12月${monthTxt}`" width="120">
      <template slot-scope="scope">
        <span>{{ scope.row.monthAmount12 | moneyFilterNoUnit }}</span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
  export default {
    props: {
      dataList: {
        type: Array,
        default: () => {
          return [];
        },
      },
      isTree: {
        type: Boolean,
        default: false,
      },
      tableType: {
        type: String,
        default: '',
      },
    },

    data() {
      return {
        defaultProps: {
          children: 'child',
          hasChildren: 'hasChildren',
        },
        className: '',
        allMoney1: '',
        allMoney2: '',
        monthTxt: '',
      };
    },

    watch: {
      tableType: {
        immediate: true,
        handler(val) {
          this.initTableThTxt(val);
        },
      },
    },

    methods: {
      async getChartsData() {},

      initTableThTxt(val) {
        if (val == 'yearIncomeCash' || val == 'compileIncomeCash') {
          this.className = '收入类别';
          this.allMoney1 = '年度收款总金额';
          this.allMoney2 = '上一年收款总额';
          this.monthTxt = '收款';
        } else if (val == 'yearIncomeDuty' || val == 'compileIncomeDuty') {
          this.className = '收入类别';
          this.allMoney1 = '年度收入总金额';
          this.allMoney2 = '上一年收入总额';
          this.monthTxt = '收入';
        } else if (val == 'yearPayCash' || val == 'compilePayCash') {
          this.className = '支出类别';
          this.allMoney1 = '年度支出总金额';
          this.allMoney2 = '上一年支出总额';
          this.monthTxt = '支出';
        } else if (val == 'yearPayDuty' || val == 'compilePayDuty') {
          this.className = '支出类别';
          this.allMoney1 = '年度权责支出总金额';
          this.allMoney2 = '上一年权责支出总额';
          this.monthTxt = '权责支出';
        } else if (val == 'executePayCash') {
          this.className = '支出类别';
          this.allMoney1 = '累计执行付款总金额';
          this.allMoney2 = '计划支出';
          this.monthTxt = '支出';
        } else if (val == 'executePayDuty') {
          this.className = '支出类别';
          this.allMoney1 = '累计权责支出总金额';
          this.allMoney2 = '计划权责支出总金额';
          this.monthTxt = '权责支出';
        } else if (val == 'executeIncomeCash') {
          this.className = '收入类别';
          this.allMoney1 = '累计当前收款总金额';
          this.allMoney2 = '计划收款总金额';
          this.monthTxt = '收款';
        } else if (val == 'executeIncomeDuty') {
          this.className = '收入类别';
          this.allMoney1 = '累计当前确认应收总金额';
          this.allMoney2 = '计划收入总金额';
          this.monthTxt = '收入';
        }
      },
    },

    mounted() {},
  };
</script>

<style lang="scss" scoped>
  ::v-deep .el-table__header th {
    background: rgba($color: #f8f8f8, $alpha: 1);
  }
  .className {
    display: inline-block;
    width: 100%;
  }
</style>
